<template>
  <el-dialog
    :title="$t('chart.select_dataset')"
    :visible.sync="selectDatasetFlag"
    width="1200px"
    class="de-dialog-form"
    append-to-body
  >
    <div class="dataset-task-table">
      <div class="dataset-tree">
        <el-input
          v-model="filterText"
          size="mini"
          :placeholder="$t('commons.search')"
          prefix-icon="el-icon-search"
          clearable
        />
        <div
          v-loading="treeLoading"
          class="tree"
        >
          <el-tree
            ref="datasetTreeRef"
            current-node-key="id"
            :data="treeData"
            node-key="id"
            highlight-current
            :expand-on-click-node="true"
            :filter-node-method="filterNode"
            @node-click="nodeClick"
          >
            <span
              slot-scope="{ data }"
              class="custom-tree-node"
            >
              <span v-if="data.modelInnerType === 'group'">
                <svg-icon icon-class="scene" />
                <span
                  style="
                    margin-left: 6px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                  "
                  :title="data.name"
                >{{ data.name }}</span>
              </span>
              <span v-else>
                <span>
                  <svg-icon
                    :icon-class="`ds-${data.modelInnerType}`"
                    :class="`ds-icon-${data.modelInnerType}`"
                  />
                </span>
                <span
                  style="
                    margin-left: 6px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                  "
                  :title="data.name"
                >{{ data.name }}</span>
              </span>
            </span>
          </el-tree>
        </div>
      </div>
      <div
        v-loading="dataLoading"
        class="dataset-tree-table"
      >
        <p
          v-if="tableName"
          class="table-name"
        >
          {{ tableName }} <span>{{ $t("chart.preview_100_data") }}</span>
        </p>
        <el-table
          v-if="table.length"
          border
          style="width: 100%"
          :data="table"
        >
          <el-table-column
            v-for="field in fields"
            :key="field.dataeaseName"
            min-width="200"
            :prop="field.dataeaseName"
            :resizable="true"
          >
            <template slot="header">
              <svg-icon
                :icon-class="iconFormat(field.deType).iconClass"
                :class="iconFormat(field.deType).class"
              />
              <span>{{ field.name }}</span>
            </template>
          </el-table-column>
        </el-table>
        <el-empty
          v-else
          :description="$t('暂无数据')"
        />
      </div>
    </div>
    <div
      slot="footer"
      class="dialog-footer"
    >
      <deBtn
        secondary
        @click="selectDatasetFlag = false"
      >{{
        $t("chart.cancel")
      }}</deBtn>
      <deBtn
        :disabled="!tableName"
        type="primary"
        @click="setIdName"
      >{{
        $t("fu.table.ok")
      }}</deBtn>
    </div>
  </el-dialog>
</template>

<script>
import { queryAuthModel } from '@/api/authModel/authModel'
import { post } from '@/api/dataset/dataset'

export default {
  props: {
    customType: {
      type: Array,
      required: false,
      default: null
    },
    mode: {
      type: Number,
      required: false,
      default: -1
    },
    privileges: {
      type: String,
      required: false,
      default: 'use'
    },
    clearEmptyDir: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  data() {
    return {
      selectDatasetFlag: false,
      tableName: '',
      tableId: '',
      treeData: [],
      table: [],
      filterText: '',
      fields: [],
      dataLoading: false,
      treeLoading: false
    }
  },
  watch: {
    filterText(val) {
      this.$refs.datasetTreeRef.filter(val)
    }
  },
  mounted() {
    this.treeNode()
  },
  methods: {
    iconFormat(deType) {
      const val = ['text', 'time', 'value', 'value', 'location'][deType]
      return {
        class: `field-icon-${val}`,
        iconClass: `field_${val}`
      }
    },
    treeNode() {
      this.treeLoading = true
      const modelInnerTypeArray = Array.isArray(this.customType)
        ? [...this.customType, 'group']
        : null
      queryAuthModel(
        {
          modelType: 'dataset',
          privileges: this.privileges,
          datasetMode: this.mode,
          clearEmptyDir: this.clearEmptyDir,
          mode: this.mode < 0 ? null : this.mode,
          modelInnerTypeArray
        },
        true
      )
        .then((res) => {
          this.treeData = res.data
        })
        .finally(() => {
          this.treeLoading = false
        })
    },
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    initData(table) {
      this.dataLoading = true
      table.row = 100
      table.previewForTask = true
      post('/dataset/table/getPreviewData/1/100', table, false, 30000)
        .then((response) => {
          this.fields = response.data.fields
          this.table = response.data.data
        })
        .finally((res) => {
          this.dataLoading = false
        })
    },
    init() {
      this.selectDatasetFlag = true
    },
    setIdName() {
      this.$emit('getTableId', this.tableId, this.tableName)
      this.selectDatasetFlag = false
    },
    nodeClick(data) {
      const { id, name, modelInnerType: type } = data
      if (type === 'group') return
      this.tableName = name
      this.tableId = id
      this.initData(data)
    }
  }
}
</script>

<style lang="scss">
.dataset-task-table {
  box-sizing: border-box;
  height: 628px;
  border: 1px solid #dee0e3;
  border-radius: 4px;
  display: flex;
  max-height: 628px;
  .el-tree-node__content {
    height: 40px;
    border-radius: 4px;
    &:hover {
      background-color: var(--deWhiteHover, #3370ff) !important;
      .custom-tree-node {
        color: var(--primary, #3370ff);
      }
    }
  }
  .dataset-tree {
    width: 253px;
    border-right: 1px solid #dee0e3;
    padding: 16px;

    .tree {
      padding-top: 16px;
      overflow-y: auto;
      height: calc(100% - 30px);
    }
  }
  .dataset-tree-table {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
    .table-name {
      margin: 0;
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-family: AlibabaPuHuiTi;
      font-size: 16px;
      font-weight: 500;
      line-height: 24px;
      color: var(--deTextPrimary, #000000);
      span {
        font-size: 14px;
        font-weight: 400;
        color: #646a73;
      }
    }
  }
}
</style>
